<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>紫罗兰永恒花园</title>
	<link rel="shortcut icon" href="image/京阿尼徽标.png"/> 
<style type="text/css">
	.Head{
    font-size: 0px;
    border-radius: 20px;
		}
	.Topic{
		background-color:#0FAEF8;
		float: ;
		color: #DDDFD9;
	}
	.Topic1{
		background-color:#00FFAB;
		float: ;
	}
	.Topic2{
		float: right;
	}
	.top{
    font-family: cursive, sans-serif;
    background-color: #13D4F6;
    color: black;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 1000px 200px #2789FF;
	}
	.main{
    background-color: url;
    background-image: url(image/lake.jfif);
    background-size: 100% 100%;
    background-position: 0% 0%;
    width: 100%;
    height: 100%;
    font-size: 36px;
    margin-right: 50px;
    border-radius: 10px;
	}
	.part{
		
	}
	 .slideshow {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
    border-radius: 15px;
    
    margin-right: 5px;
    margin-top: 10px;
    margin-bottom: 5px;
        }
        
        .slideshow img {
    position: absolute;
    width: 100%;
    height: 150%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
        }
        
        .slideshow img.active {
            opacity: 1;
        }
	p{
			 animation-duration: 3s;
			 animation-name: slidein;
		     animation-iteration-count: 1;
			 animation-direction: alternate;
		}
		@keyframes slidein {
					  from {
						margin-left: 100%;
						width: 300%;
					  }

					  to {
						margin-left: 0%;
						width: 100%;
					  }
					}
	a{
		transition:all 0.1s linear 0.1s;
            cursor: pointer;
	}
	a:hover{
    box-shadow: 0px 0px 20px #FFffff;
    
        }
</style>

</head>

<body style="background-color: #7BC7FF">
<div class="top" id="Top">
  <table class="Head" id="head1" width="100%" border="0" cellspacing="4" cellpadding="3">
    <tbody>
      <tr>
        <td class="Topic" id="line1" align="center" valign="middle" style="font-family: '楷体'; font-size: 36px; border-radius: 20px;">紫罗兰永恒花园</td>
      </tr>
      <tr>
        <td class="Topic1" id="line2" align="center" valign="middle" style="font-family: '华文行楷'; font-size: 24px; color: #000000; border-radius: 20px;"><p>永远的自动手记人偶</p>
        <p>薇尔莉特·伊芙加顿</p></td>
      </tr>
    </tbody>
  </table>

  
</div>
<div class="slideshow">
  <img src="image/v2-521636363d10b0d7ec9daa222eb958c1_r.jpg" class="active">
  <img src="image/凌波.jpeg">
  <img src="image/v2-11be5ef80a31f0042227082310b01211_1440w.webp">
</div>

<script>
        var images = ['image/v2-521636363d10b0d7ec9daa222eb958c1_r.jpg', 'image/凌波.jpeg', 'image/v2-11be5ef80a31f0042227082310b01211_1440w.webp'];
        var index = 0;
        var slideshow = document.querySelector('.slideshow');

        images.forEach(function(image) {
            var img = document.createElement('img');
            img.src = image;
            slideshow.appendChild(img);
        });

        var imgElements = document.querySelectorAll('.slideshow img');

        setInterval(function() {
            imgElements[index].classList.remove('active');
            index = (index + 1) % imgElements.length;
            imgElements[index].classList.add('active');
        }, 3000);
    </script>
	
<div class="main" id="index">
 <table width="100%" border="0" cellspacing="4" cellpadding="10">
  <tbody>
    <tr>
      <td width="45%" valign="middle" style="text-align: center"><p>Part1</p></td>
      <td width="55%" style="text-align: center"><p>&nbsp;<a href="web/故事简介.html" style="color: #363F60;text-decoration: none">故事简介</a></p></td>
    </tr>
    <tr>
      <td valign="middle" style="text-align: center"><p>&nbsp;</p>
        <p>Part2</p></td>
      <td style="text-align: center"><p>&nbsp;</p>
        <p><a href="web/人物介绍.html" style="color: #363F60;text-decoration: none">人物介绍</a></p></td>
    </tr>
    <tr>
      <td valign="middle" style="text-align: center"><p>&nbsp; </p>
        <p>Part3</p>
        <p>&nbsp;</p></td>
      <td style="text-align: center"><p>&nbsp;</p>
        <p><a href="web/京都动画.html" style="color: #363F60;text-decoration: none">京都动画（制作公司）</a></p>
        <p>&nbsp;</p></td>
    </tr>
    <tr>
      <td align="center" valign="middle" style="text-align: center"><p>Part4        </p>
        <p>&nbsp;</p></td>
      <td valign="top" style="text-align: center"><p style="font-family: '楷体';"><a href="web/集锦.html" style="color: #363F60;text-decoration: none">集锦</a></p></td>
    </tr>
  </tbody>
</table>

</div>
<div style="background-color:; margin-left: 3px;margin-right: 5px;margin-bottom: 10px;text-align: center;border-radius: 13px;"><a href="https://ruby_2023.gitee.io/2023dormitoryhomepage/" style="font-family: '华文宋体'; text-align: center; color: black; font-size: 40px; text-decoration: none; background-color: ; border-radius: 5px;">返回寝室主页</a></div>
</body>
</html>
